<template>
	<view class="blogitem">
		<view class="head">
			<view class="userinfo">
				<view class="avatar">
					<image :src="giveAvatar(item)" mode="aspectFill"></image>
				</view>
				<view class="name">{{ giveName(item) }}</view>
				<view class="time">
					<!-- 一分钟之前是刚刚 
						  大于等于一分钟小于一小时 转为xx分钟前后，超过一小时显示xx小时前后
						  超过一个月显示日期
					 -->
					<uni-dateformat :date="item.publish_date" format="MM月dd hh:mm"
						:threshold="[60000, 3600000 * 24 * 30]"></uni-dateformat>
				</view>
			</view>

			<view class="more" @click="clickMore">
				<text class="iconfont icon-ellipsis"></text>
			</view>
		</view>

		<view class="body">
			<view class="title" @click="goDetail">{{ item.title }}</view>
			<view class="text" @click="goDetail" v-if="item.description">
				<view class="t">{{ item.description }}</view>
			</view>
			<view class="piclist">
				<view class="pic" :class="item.picurls.length == 1 ? 'only' : ''"
					v-for="(pic, picIndex) in item.picurls" :key="pic">
					<image @click="previewImage(picIndex)" :src="pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="info">
			<view class="box">
				<text class="iconfont icon-a-27-liulan"></text>
				<text>{{ item.view_count }}</text>
			</view>
			<view class="box">
				<text class="iconfont icon-a-5-xinxi"></text>
				<text>{{ item.comment_count && item.comment_count > 0 ? item.comment_count : '评论' }}</text>
			</view>
			<view class="box" :style="{ color: item.isLike ? '#0199fe' : '#000' }" @click="likeChange">
				<text class="iconfont icon-a-106-xihuan"></text>
				<text>{{ item.like_count ? item.like_count : '点赞' }}</text>
			</view>
		</view>
		<u-action-sheet :actions="list" :show="show" cancelText="取消" :closeOnClickAction="true"
			:closeOnClickOverlay="true" @select="selectChange" @close="onClose"></u-action-sheet>
	</view>
</template>

<script>
	import {
		giveName,
		giveAvatar,
		likeFun
	} from '../../utils/tools.js';
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js';
	const db = uniCloud.database();

	import pageJson from '@/pages.json';
	export default {
		name: 'blog-item',
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			isLike: {
				type: Boolean
			},
			like_count: {
				type: Number
			}
		},
		data() {
			return {
				show: false,
				list: [{
						name: '修改',
						type: 'edit',
						disabled: true
					},
					{
						name: '删除',
						type: 'del',
						color: '#f56C6C',
						disabled: true
					}
				]
			};
		},
		methods: {
			giveName,
			giveAvatar,
			// 点赞
			likeChange() {
				// 没有登录
				if (!store.hasLogin) {
					uni.showModal({
						title: '是否确认登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/' + pageJson.uniIdRouter.loginPage
								});
							}
						}
					});
					return;
				}
				// 带赞防抖
				let time = Date.now();
				if (time - this.likeTime < 30000) {
					uni.showToast({
						title: '操作太频繁了，请稍后重试...',
						icon: 'none'
					});
					return;
				}
				this.likeTime = time;
				// 前端点赞逻辑（数量 和状态的修改） 不能直接操作父级值
				// this.item.isLike ? this.item.like_count-- : this.item.like_count++;
				// this.item.isLike = !this.item.isLike;


				let like_count = this.item.like_count
				this.item.like_count ? like_count-- : like_count++
				let isLike = !this.item.isLike
				this.$emit("update:isLike", isLike)
				this.$emit("update:like_count",like_count)
				// 更新后台数据
				likeFun(this.item._id);
			},
			// 选择
			selectChange(e) {
				console.log(e);
				let type = e.type;
				if (type == 'del') {
					this.delFun();
				}
			},
			// 删除
			async delFun() {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					});
					let res = await db.collection('quanzi_artcle').doc(this.item._id).update({
						delStatus: true
					});
					console.log(res);
					uni.hideLoading();
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					this.$emit('delEvent');
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading();
				}
			},
			// 关闭
			onClose() {
				this.show = false;
			},
			// 点击更多
			clickMore() {
				// 	当前用户的id
				let uid = uniCloud.getCurrentUserInfo().uid;
				// 当前文章发布者
				let currentId = this.item.user_id[0]._id;
				if (uid === currentId || this.uniIDHasRole('admin')) {
					this.list.forEach((item) => {
						item.disabled = false;
					});
				}
				this.show = true;
			},
			// 预览
			previewImage(index) {
				uni.previewImage({
					current: index, //current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
					urls: this.item.picurls //需要预览的图片链接列表
				});
			},
			// 去详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + this.item._id
				});
			}
		}
	};
</script>

<style lang="scss">
	.blogitem {
		.head {
			display: flex;
			font-size: 32rpx;
			align-items: center;
			justify-content: space-between;

			.userinfo {
				display: flex;
				align-items: center;

				.avatar {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

				.name {
					color: #222;
					padding-left: 10rpx;
				}

				.time {
					color: #888;
					font-size: 22rpx;
					padding-left: 20rpx;
				}
			}

			.more {
				padding: 5rpx;

				.iconfont {
					font-size: 50rpx;
					color: #888;
				}
			}
		}

		.body {
			padding: 15rpx 0 30rpx;

			.title {
				font-size: 44rpx;
				color: #000;
				font-weight: 600;
				text-align: justify;
			}

			.text {
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				font-size: 30rpx;
				text-align: justify;
				color: #888;

				.t {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.piclist {
				display: flex;
				padding-top: 20rpx;

				.pic {
					width: 225rpx;
					height: 225rpx;
					margin-right: 6rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}

					// 第一个圆角
					&:first-child {
						border-radius: 20rpx 0 0 20rpx;
					}

					// 最后一个圆角
					&:last-child {
						border-radius: 0 20rpx 20rpx 0;
					}

					// 只有一个以上会出问题,要添加该类名
					&.only {
						border-radius: 20rpx;
					}
				}
			}
		}

		.info {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 26rpx;
			color: #333;

			.box {
				display: flex;
				align-items: center;
				padding: 15rpx 0 5rpx;
				flex: 1;
				display: flex;
				justify-content: center;

				.iconfont {
					font-size: 40rpx;
					padding-right: 10rpx;
				}
			}

			.box .active {
				color: '#0199fe';
			}
		}
	}
</style>